<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端组招新宣讲</title>
    <link rel="icon" type="image/x-icon" href="./favicon.ico" />
    <script src="./js/tailwindcss.js"></script>
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <script src="./js/chart.umd.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <link rel="stylesheet" href="./css/fullpage.min.css" />

    <!-- 本地样式文件 -->
    <link rel="stylesheet" href="./css/styles.css" />

    <script>
      // Tailwind配置
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: '#3B82F6',
              secondary: '#10B981',
              accent: '#8B5CF6',
              dark: '#1E293B',
              light: '#F8FAFC',
            },
            fontFamily: {
              sans: ['Inter', 'system-ui', 'sans-serif'],
            },
          },
        },
      }
    </script>

    <style type="text/tailwindcss">
      @layer utilities {
        .text-shadow {
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .text-gradient {
          background-clip: text;
          -webkit-background-clip: text;
          color: transparent;
        }
        .animate-float {
          animation: float 6s ease-in-out infinite;
        }
        .animate-pulse-slow {
          animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
      }

      @keyframes float {
        0% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-20px);
        }
        100% {
          transform: translateY(0px);
        }
      }

      /* 新增动画 */
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes scaleIn {
        from {
          opacity: 0;
          transform: scale(0.8);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      /* 感谢页面特殊动画 */
      .animate-fade-in-up {
        animation: fadeInUp 0.8s ease-out forwards;
      }

      .animate-scale-in {
        animation: scaleIn 0.6s ease-out forwards;
      }

      /* 延迟动画 */
      .animate-delay-100 {
        animation-delay: 0.1s;
      }
      .animate-delay-200 {
        animation-delay: 0.2s;
      }
      .animate-delay-300 {
        animation-delay: 0.3s;
      }
      .animate-delay-400 {
        animation-delay: 0.4s;
      }
      .animate-delay-500 {
        animation-delay: 0.5s;
      }

      /* FullPage.js 容器宽度强制修复 */
      .fp-overflow {
        width: 100vw !important;
        max-width: none !important;
        overflow-x: visible !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
      }

      #fullpage,
      .fp-section {
        width: 100% !important;
        max-width: none !important;
      }

      /* 强制修复居中问题 */
      .fp-section {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 100vh !important;
        position: relative !important;
      }

      .fp-tableCell {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: 100vh !important;
        vertical-align: middle !important;
      }

      /* 确保 section 内容容器也居中 */
      .section {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
      }

      /* 修复具体页面的居中 */
      .section.relative {
        min-height: 100vh !important;
        padding: 2rem 0 !important;
      }

      /* 隐藏 fullPage.js 版权标识 */
      .fp-watermark {
        display: none !important;
      }

      /* 自定义导航栏样式 */
      #fp-nav ul li a span {
        background: rgba(255, 255, 255, 0.3) !important;
        border: 2px solid rgba(255, 255, 255, 0.5) !important;
      }

      #fp-nav ul li a.active span {
        background: #3b82f6 !important;
        border-color: #3b82f6 !important;
      }

      #fp-nav ul li .fp-tooltip {
        background: rgba(30, 41, 59, 0.9) !important;
        color: white !important;
        border-radius: 6px !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
      }
    </style>
  </head>
  <body class="bg-dark text-light">
    <div id="fullpage">
      <!-- 欢迎页 -->
      <div class="section relative flex flex-col items-center justify-center">
        <div id="particles-js"></div>
        <div class="relative z-10 text-center">
          <h1
            class="text-[clamp(2.5rem,8vw,5rem)] font-bold mb-6 text-gradient bg-gradient-to-r from-primary to-accent animate-pulse-slow"
          >
            欢迎来到前端世界
          </h1>
          <p class="text-[clamp(1.2rem,3vw,2rem)] mb-10 max-w-3xl mx-auto">
            用代码创造视觉的奇迹，让创意在浏览器中绽放
          </p>
          <div class="flex justify-center gap-4 flex-wrap">
            <a
              href="#what-is-frontend"
              class="px-8 py-3 bg-primary hover:bg-primary/80 rounded-full text-white font-medium transition-all duration-300 flex items-center gap-2"
            >
              开始探索 <i class="fa fa-arrow-down"></i>
            </a>
          </div>
        </div>
      </div>

      <!-- 前端是什么 -->
      <div class="section relative">
        <div
          class="absolute inset-0 bg-gradient-to-br from-dark via-dark/95 to-primary/20"
        ></div>
        <div class="relative z-10 max-w-5xl mx-auto">
          <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-8 text-center">
            <span class="text-primary">#</span> 前端是什么？
          </h2>

          <div class="grid md:grid-cols-2 gap-10 items-center">
            <div>
              <p class="text-xl mb-6 leading-relaxed">
                前端是用户直接接触的部分，是网站或应用的"脸面"和"交互桥梁"。
                它将设计师的创意和后端的数据转化为用户可以看到和操作的界面。
              </p>
              <p class="text-xl mb-6 leading-relaxed">
                简单来说，你在浏览器中看到的一切——文字、图片、动画、交互效果，
                都是前端开发者的杰作。
              </p>
              <div class="flex gap-3 mt-8">
                <div
                  class="p-4 bg-primary/20 rounded-lg border border-primary/30"
                >
                  <i class="fa fa-eye text-3xl text-primary mb-2"></i>
                  <p class="font-medium">视觉呈现</p>
                </div>
                <div
                  class="p-4 bg-secondary/20 rounded-lg border border-secondary/30"
                >
                  <i
                    class="fa fa-hand-pointer-o text-3xl text-secondary mb-2"
                  ></i>
                  <p class="font-medium">交互体验</p>
                </div>
                <div
                  class="p-4 bg-accent/20 rounded-lg border border-accent/30"
                >
                  <i class="fa fa-mobile text-3xl text-accent mb-2"></i>
                  <p class="font-medium">多端适配</p>
                </div>
              </div>
            </div>

            <div class="relative">
              <div
                class="absolute inset-0 bg-gradient-to-tr from-primary/30 to-accent/30 rounded-2xl blur-xl opacity-70 animate-pulse-slow"
              ></div>
              <div
                class="relative bg-dark/80 backdrop-blur-sm p-6 rounded-xl border border-white/10 shadow-xl"
              >
                <div class="flex items-center gap-2 mb-4">
                  <div class="w-3 h-3 rounded-full bg-red-500"></div>
                  <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                  <div class="w-3 h-3 rounded-full bg-green-500"></div>
                  <div class="flex-1 text-center text-sm text-gray-400">
                    浏览器中的前端
                  </div>
                </div>
                <div class="code-block text-sm md:text-base text-gray-300">
                  <pre>
&lt;!-- 这就是前端代码 --&gt;
  &lt;div class="website"&gt;
    &lt;h1&gt;你好，世界！&lt;/h1&gt;
    &lt;p&gt;这是一个前端页面&lt;/p&gt;
    &lt;button onclick="alert('很酷吧！')"&gt;
      点击我
    &lt;/button&gt;
  &lt;/div&gt;</pre
                  >
                </div>
                <div
                  class="mt-4 p-4 bg-white/5 rounded-lg border border-white/10"
                >
                  <div
                    class="text-center py-2 px-4 bg-primary/20 border border-primary/30 rounded mb-2"
                  >
                    你好，世界！
                  </div>
                  <div class="text-center mb-3">这是一个前端页面</div>
                  <div class="text-center">
                    <button
                      id="demo-btn"
                      class="px-4 py-2 bg-primary text-white rounded hover:bg-primary/80 transition-colors"
                    >
                      点击我
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 技术栈 -->
      <div class="section relative">
        <div
          class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(139,92,246,0.2),transparent_60%)]"
        ></div>
        <div class="relative z-10 max-w-6xl mx-auto">
          <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-12 text-center">
            <span class="text-accent">&lt;/&gt;</span> 我们使用的技术
          </h2>

          <!-- 核心技术 -->
          <div class="mb-16">
            <h3 class="text-2xl font-semibold mb-8 text-center">核心三剑客</h3>
            <div class="grid md:grid-cols-3 gap-8">
              <div
                class="bg-dark/60 backdrop-blur-sm p-6 rounded-xl border border-white/10 hover:border-orange-500/50 transition-all duration-300"
              >
                <div
                  class="w-16 h-16 bg-orange-500/20 rounded-full flex items-center justify-center mb-4 mx-auto"
                >
                  <i class="fa fa-html5 text-3xl text-orange-500"></i>
                </div>
                <h4 class="text-xl font-bold mb-3 text-center">HTML</h4>
                <p class="text-gray-300 text-center">
                  网页的骨架，定义内容的结构和意义
                </p>
              </div>

              <div
                class="bg-dark/60 backdrop-blur-sm p-6 rounded-xl border border-white/10 hover:border-blue-500/50 transition-all duration-300"
              >
                <div
                  class="w-16 h-16 bg-blue-500/20 rounded-full flex items-center justify-center mb-4 mx-auto"
                >
                  <i class="fa fa-css3 text-3xl text-blue-500"></i>
                </div>
                <h4 class="text-xl font-bold mb-3 text-center">CSS</h4>
                <p class="text-gray-300 text-center">
                  网页的样式，负责美化和布局
                </p>
              </div>

              <div
                class="bg-dark/60 backdrop-blur-sm p-6 rounded-xl border border-white/10 hover:border-yellow-500/50 transition-all duration-300"
              >
                <div
                  class="w-16 h-16 bg-yellow-500/20 rounded-full flex items-center justify-center mb-4 mx-auto"
                >
                  <i class="fa fa-code text-3xl text-yellow-500"></i>
                </div>
                <h4 class="text-xl font-bold mb-3 text-center">JavaScript</h4>
                <p class="text-gray-300 text-center">
                  网页的灵魂，实现交互和动态效果
                </p>
              </div>
            </div>
          </div>

          <!-- 框架和工具 -->
          <div>
            <h3 class="text-2xl font-semibold mb-8 text-center">框架与工具</h3>
            <div class="flex flex-wrap justify-center gap-4">
              <div
                class="tech-tag bg-[#41B883]/20 text-[#41B883] px-5 py-3 rounded-full border border-[#41B883]/30 font-medium"
              >
                Vue
              </div>
              <div
                class="tech-tag bg-[#61DAFB]/20 text-[#61DAFB] px-5 py-3 rounded-full border border-[#61DAFB]/30 font-medium"
              >
                React
              </div>
              <div
                class="tech-tag bg-[#007ACC]/20 text-[#007ACC] px-5 py-3 rounded-full border border-[#007ACC]/30 font-medium"
              >
                TypeScript
              </div>
              <div
                class="tech-tag bg-[#EF3B2C]/20 text-[#EF3B2C] px-5 py-3 rounded-full border border-[#EF3B2C]/30 font-medium"
              >
                Tailwind CSS
              </div>
              <div
                class="tech-tag bg-[#000000]/20 text-[#FFFFFF] px-5 py-3 rounded-full border border-[#FFFFFF]/30 font-medium"
              >
                Three.js
              </div>
              <div
                class="tech-tag bg-[#9C27B0]/20 text-[#9C27B0] px-5 py-3 rounded-full border border-[#9C27B0]/30 font-medium"
              >
                Webpack
              </div>
              <div
                class="tech-tag bg-[#FF6B00]/20 text-[#FF6B00] px-5 py-3 rounded-full border border-[#FF6B00]/30 font-medium"
              >
                Vite
              </div>
              <div
                class="tech-tag bg-[#339933]/20 text-[#339933] px-5 py-3 rounded-full border border-[#339933]/30 font-medium"
              >
                Node.js
              </div>
            </div>

            <!-- 前端技术图标轮播 -->
            <div class="mt-12 overflow-hidden">
              <h4 class="text-xl font-semibold mb-8 text-center">
                我们掌握的技术栈
              </h4>

              <!-- 第一排图标 -->
              <div class="relative mb-6">
                <div class="flex animate-scroll-right">
                  <div class="flex gap-3 shrink-0">
                    <div class="tech-icon-item">
                      <img
                        src="./images/Vue.png"
                        alt="Vue"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">Vue</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/react.png"
                        alt="React"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">React</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/JavaScript.png"
                        alt="JavaScript"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">JavaScript</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/typescript.png"
                        alt="TypeScript"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">TypeScript</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/html.png"
                        alt="HTML"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">HTML</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/css.png"
                        alt="CSS"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">CSS</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/scss.png"
                        alt="SCSS"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">SCSS</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/Tailwind CSS.png"
                        alt="Tailwind CSS"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">Tailwind</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/vite.png"
                        alt="Vite"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">Vite</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/webpack.png"
                        alt="Webpack"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">Webpack</span>
                    </div>
                  </div>
                  <!-- 添加间隙 -->
                  <div class="w-8 shrink-0"></div>
                  <!-- 重复一遍实现无缝滚动 -->
                  <div class="flex gap-3 shrink-0">
                    <div class="tech-icon-item">
                      <img
                        src="./images/Vue.png"
                        alt="Vue"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">Vue</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/react.png"
                        alt="React"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">React</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/JavaScript.png"
                        alt="JavaScript"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">JavaScript</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/typescript.png"
                        alt="TypeScript"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">TypeScript</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/html.png"
                        alt="HTML"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">HTML</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/css.png"
                        alt="CSS"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">CSS</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/scss.png"
                        alt="SCSS"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">SCSS</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/Tailwind CSS.png"
                        alt="Tailwind CSS"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">Tailwind</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/vite.png"
                        alt="Vite"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">Vite</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/webpack.png"
                        alt="Webpack"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">Webpack</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 第二排图标 -->
              <div class="relative">
                <div class="flex animate-scroll-left">
                  <div class="flex gap-3 shrink-0">
                    <div class="tech-icon-item">
                      <img
                        src="./images/Nodejs.png"
                        alt="Node.js"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">Node.js</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/axios.png"
                        alt="Axios"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">Axios</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/pinia.png"
                        alt="Pinia"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">Pinia</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/vueuse.png"
                        alt="VueUse"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">VueUse</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/element.png"
                        alt="Element"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">Element</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/ECharts.png"
                        alt="ECharts"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">ECharts</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/eslint.png"
                        alt="ESLint"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">ESLint</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/Vscode.png"
                        alt="VS Code"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">VS Code</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/uniapp.png"
                        alt="UniApp"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">UniApp</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/xiaochengxu.png"
                        alt="小程序"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">小程序</span>
                    </div>
                  </div>
                  <!-- 添加间隙 -->
                  <div class="w-8 shrink-0"></div>
                  <!-- 重复一遍实现无缝滚动 -->
                  <div class="flex gap-3 shrink-0">
                    <div class="tech-icon-item">
                      <img
                        src="./images/Nodejs.png"
                        alt="Node.js"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">Node.js</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/axios.png"
                        alt="Axios"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">Axios</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/pinia.png"
                        alt="Pinia"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">Pinia</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/vueuse.png"
                        alt="VueUse"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">VueUse</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/element.png"
                        alt="Element"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">Element</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/ECharts.png"
                        alt="ECharts"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">ECharts</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/eslint.png"
                        alt="ESLint"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">ESLint</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/Vscode.png"
                        alt="VS Code"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">VS Code</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/uniapp.png"
                        alt="UniApp"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">UniApp</span>
                    </div>
                    <div class="tech-icon-item">
                      <img
                        src="./images/xiaochengxu.png"
                        alt="小程序"
                        class="w-16 h-16 object-contain"
                      />
                      <span class="text-sm text-gray-400 mt-2">小程序</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 展示页1 前端动画 -->
      <div class="section">
        <div
          class="absolute inset-0 bg-gradient-to-br from-dark/80 to-primary/10"
        ></div>

        <div
          class="relative z-10 flex flex-col items-center justify-start min-h-screen pt-16"
        >
          <!-- 页面标题 -->
          <div class="text-center mb-12">
            <h2 class="text-3xl font-bold mb-4">前端动画展示</h2>
            <p class="text-lg text-gray-400">CSS & JavaScript 动画效果</p>
          </div>

          <!-- 三个动画元素并列排列 -->
          <div
            class="flex justify-center items-end gap-16 w-full max-w-7xl px-8 mt-20"
          >
            <!-- 雨云动画 -->
            <div class="flex flex-col items-center min-w-[320px]">
              <div class="cloud-container" style="width: 320px; height: 320px">
                <div
                  class="cloud"
                  style="margin-top: 40px; transform: scale(0.7)"
                ></div>
              </div>
              <h3 class="text-xl font-semibold mt-20 text-primary">雨云动画</h3>
              <p class="text-sm text-gray-400 text-center">CSS动画 + 可拖拽</p>
            </div>

            <!-- 指环加载动画 -->
            <div class="flex flex-col items-center min-w-[320px]">
              <div
                class="loading-screen"
                style="--n: 24; width: 280px; height: 280px; margin: 0"
              >
                <div class="ring">
                  <div class="item" style="--i: 0">正</div>
                  <div class="item" style="--i: 1">在</div>
                  <div class="item" style="--i: 2">加</div>
                  <div class="item" style="--i: 3">载</div>
                  <div class="item" style="--i: 4">，</div>
                  <div class="item" style="--i: 5">请</div>
                  <div class="item" style="--i: 6">稍</div>
                  <div class="item" style="--i: 7">候</div>
                  <div class="item" style="--i: 8">.</div>
                  <div class="item" style="--i: 9">.</div>
                  <div class="item" style="--i: 10">.</div>
                  <div class="item" style="--i: 11"></div>
                  <div class="item" style="--i: 12"></div>
                  <div class="item" style="--i: 13"></div>
                  <div class="item" style="--i: 14"></div>
                  <div class="item" style="--i: 15"></div>
                  <div class="item" style="--i: 16"></div>
                  <div class="item" style="--i: 17"></div>
                  <div class="item" style="--i: 18"></div>
                  <div class="item" style="--i: 19"></div>
                  <div class="item" style="--i: 20"></div>
                  <div class="item" style="--i: 21"></div>
                  <div class="item" style="--i: 22"></div>
                  <div class="item" style="--i: 23"></div>
                </div>
                <div class="ring">
                  <div class="item" style="--i: 0">正</div>
                  <div class="item" style="--i: 1">在</div>
                  <div class="item" style="--i: 2">加</div>
                  <div class="item" style="--i: 3">载</div>
                  <div class="item" style="--i: 4">，</div>
                  <div class="item" style="--i: 5">请</div>
                  <div class="item" style="--i: 6">稍</div>
                  <div class="item" style="--i: 7">候</div>
                  <div class="item" style="--i: 8">.</div>
                  <div class="item" style="--i: 9">.</div>
                  <div class="item" style="--i: 10">.</div>
                  <div class="item" style="--i: 11"></div>
                  <div class="item" style="--i: 12"></div>
                  <div class="item" style="--i: 13"></div>
                  <div class="item" style="--i: 14"></div>
                  <div class="item" style="--i: 15"></div>
                  <div class="item" style="--i: 16"></div>
                  <div class="item" style="--i: 17"></div>
                  <div class="item" style="--i: 18"></div>
                  <div class="item" style="--i: 19"></div>
                  <div class="item" style="--i: 20"></div>
                  <div class="item" style="--i: 21"></div>
                  <div class="item" style="--i: 22"></div>
                  <div class="item" style="--i: 23"></div>
                </div>
              </div>
              <h3 class="text-xl font-semibold mt-20 text-secondary">
                指环动画
              </h3>
              <p class="text-sm text-gray-400 text-center">3D旋转效果</p>
            </div>

            <!-- 笑脸动画 -->
            <div class="flex flex-col items-center min-w-[320px]">
              <div class="face" style="width: 280px; height: 280px">
                <div class="eyes">
                  <div class="eye"></div>
                  <div class="eye"></div>
                </div>
              </div>
              <h3 class="text-xl font-semibold mt-28 text-accent">笑脸动画</h3>
              <p class="text-sm text-gray-400 text-center">
                鼠标跟随 + 悬停变化
              </p>
            </div>
          </div>

          <!-- 切换到 ASCII 展示的跳转按钮 -->
          <div class="w-full flex justify-center mt-20">
            <a
              href="./ascii/index.html"
              target="_blank"
              class="inline-flex items-center gap-4 px-8 py-4 text-white rounded-full shadow-2xl transform transition duration-300 hover:scale-105 ring-1 ring-white/10"
              style="
                background: linear-gradient(90deg, #012696 0%, #a4e2c6 100%);
              "
              onmouseover="this.style.background='linear-gradient(90deg, #0a1a4a 0%, #7fd8b3 100%)'"
              onmouseout="this.style.background='linear-gradient(90deg, #012696 0%, #a4e2c6 100%)'"
            >
              <span
                class="flex items-center justify-center w-10 h-10 bg-white/10 rounded-full"
              >
                <i class="fa fa-font text-xl"></i>
              </span>
              <span class="text-lg font-semibold">查看 ASCII 艺术演示</span>
              <svg
                class="w-5 h-5 opacity-90"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M17 8l4 4m0 0l-4 4m4-4H3"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- 展示页2 数据可视化 -->
      <div class="section">
        <div
          class="absolute inset-0 bg-gradient-to-br from-dark/80 to-accent/10"
        ></div>

        <div
          class="relative z-10 flex flex-col items-center justify-start min-h-screen pt-16"
        >
          <!-- 页面标题 -->
          <div class="text-center mb-5">
            <h2 class="text-3xl font-bold mb-4">数据可视化展示</h2>
            <p class="text-lg text-gray-400">前端让数据生动起来</p>
          </div>

          <!-- 图表展示区域 -->
          <div class="w-full max-w-[90vw] px-6">
            <!-- 第一行：大图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
              <!-- 实时数据折线图 -->
              <div
                class="bg-dark/40 backdrop-blur-sm p-6 rounded-xl border border-white/10"
              >
                <div class="flex items-center justify-between mb-4">
                  <h3 class="text-xl font-semibold text-primary">实时访问量</h3>
                  <div class="flex items-center gap-2">
                    <div
                      class="w-2 h-2 bg-green-500 rounded-full animate-pulse"
                    ></div>
                    <span class="text-sm text-gray-400">实时更新</span>
                  </div>
                </div>
                <div id="lineChart" style="width: 100%; height: 350px"></div>
              </div>

              <!-- 3D饼图 -->
              <div
                class="bg-dark/40 backdrop-blur-sm p-6 rounded-xl border border-white/10"
              >
                <h3 class="text-xl font-semibold text-secondary mb-4">
                  技术栈占比
                </h3>
                <div id="pieChart" style="width: 100%; height: 350px"></div>
              </div>
            </div>

            <!-- 第二行：小图表 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <!-- 动态柱状图 -->
              <div
                class="bg-dark/40 backdrop-blur-sm p-6 rounded-xl border border-white/10"
              >
                <h3 class="text-lg font-semibold text-accent mb-4">月度增长</h3>
                <div id="barChart" style="width: 100%; height: 250px"></div>
              </div>

              <!-- 雷达图 -->
              <div
                class="bg-dark/40 backdrop-blur-sm p-6 rounded-xl border border-white/10"
              >
                <h3 class="text-lg font-semibold text-yellow-400 mb-4">
                  技能评估
                </h3>
                <div id="radarChart" style="width: 100%; height: 250px"></div>
              </div>

              <!-- 仪表盘 -->
              <div
                class="bg-dark/40 backdrop-blur-sm p-6 rounded-xl border border-white/10"
              >
                <h3 class="text-lg font-semibold text-pink-400 mb-4">
                  性能指标
                </h3>
                <div id="gaugeChart" style="width: 100%; height: 250px"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 展示页3 实战项目展示 -->
      <div class="section">
        <div
          class="absolute inset-0 bg-gradient-to-br from-dark/80 to-secondary/10"
        ></div>

        <div
          class="relative z-10 flex flex-col items-center justify-start min-h-screen pt-16"
        >
          <!-- 页面标题 -->
          <div class="text-center mb-12">
            <h2 class="text-3xl font-bold mb-4">优秀项目展示</h2>
            <p class="text-lg text-gray-400">学习优秀的前端作品与项目案例</p>
          </div>

          <!-- 展示区域 -->
          <div class="w-full max-w-6xl px-6">
            <!-- 第一行：技术博客展示 -->
            <div class="mb-12">
              <h3 class="text-2xl font-semibold mb-8 text-center">
                <i class="fa fa-blog text-primary mr-2"></i>
                优秀技术博客
              </h3>
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- 博客链接1 -->
                <a
                  href="https://zyyo.cc/"
                  target="_blank"
                  class="group bg-dark/40 backdrop-blur-sm p-6 rounded-xl border border-white/10 hover:border-primary/50 transition-all duration-300 hover:transform hover:scale-105 flex flex-col h-full"
                >
                  <div class="flex items-center mb-4">
                    <div
                      class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center mr-4"
                    >
                      <i class="fa fa-user text-primary text-lg"></i>
                    </div>
                    <div>
                      <h4 class="text-lg font-semibold text-primary">ZYYO</h4>
                      <p class="text-sm text-gray-400">专注于Web开发技术</p>
                    </div>
                  </div>
                  <p class="text-sm text-gray-300 mb-4 flex-grow">
                    精通Vue/Node.js全栈开发，持续探索前沿技术方案
                  </p>
                  <div class="flex items-center text-primary text-sm mt-auto">
                    <span>访问博客</span>
                    <i class="fa fa-external-link ml-2"></i>
                  </div>
                </a>

                <!-- 博客链接2 -->
                <a
                  href="https://www.liveout.cn/"
                  target="_blank"
                  class="group bg-dark/40 backdrop-blur-sm p-6 rounded-xl border border-white/10 hover:border-primary/50 transition-all duration-300 hover:transform hover:scale-105 flex flex-col h-full"
                >
                  <div class="flex items-center mb-4">
                    <div
                      class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center mr-4"
                    >
                      <i class="fa fa-user text-primary text-lg"></i>
                    </div>
                    <div>
                      <h4 class="text-lg font-semibold text-primary">Echo</h4>
                      <p class="text-sm text-gray-400">重度精神内耗患者</p>
                    </div>
                  </div>
                  <p class="text-sm text-gray-300 mb-4 flex-grow">
                    天行健，君子以自强不息
                  </p>
                  <div class="flex items-center text-primary text-sm mt-auto">
                    <span>访问博客</span>
                    <i class="fa fa-external-link ml-2"></i>
                  </div>
                </a>

                <!-- 博客链接3 -->
                <a
                  href="https://shiyu.dev/"
                  target="_blank"
                  class="group bg-dark/40 backdrop-blur-sm p-6 rounded-xl border border-white/10 hover:border-primary/50 transition-all duration-300 hover:transform hover:scale-105 flex flex-col h-full"
                >
                  <div class="flex items-center mb-4">
                    <div
                      class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center mr-4"
                    >
                      <i class="fa fa-user text-primary text-lg"></i>
                    </div>
                    <div>
                      <h4 class="text-lg font-semibold text-primary">
                        云烟成雨
                      </h4>
                      <p class="text-sm text-gray-400">开发者</p>
                    </div>
                  </div>
                  <p class="text-sm text-gray-300 mb-4 flex-grow">
                    只是当时已惘然
                  </p>
                  <div class="flex items-center text-primary text-sm mt-auto">
                    <span>访问博客</span>
                    <i class="fa fa-external-link ml-2"></i>
                  </div>
                </a>

                <!-- 博客链接4 -->
                <a
                  href="https://xbtzone.com/blog/"
                  target="_blank"
                  class="group bg-dark/40 backdrop-blur-sm p-6 rounded-xl border border-white/10 hover:border-primary/50 transition-all duration-300 hover:transform hover:scale-105 flex flex-col h-full"
                >
                  <div class="flex items-center mb-4">
                    <div
                      class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center mr-4"
                    >
                      <i class="fa fa-user text-primary text-lg"></i>
                    </div>
                    <div>
                      <h4 class="text-lg font-semibold text-primary">
                        小宝さん
                      </h4>
                      <p class="text-sm text-gray-400">软件开发工程师</p>
                    </div>
                  </div>
                  <p class="text-sm text-gray-300 mb-4 flex-grow">
                    爱好历史的追忆者
                  </p>
                  <div class="flex items-center text-primary text-sm mt-auto">
                    <span>访问博客</span>
                    <i class="fa fa-external-link ml-2"></i>
                  </div>
                </a>
              </div>
            </div>

            <!-- 第二行：完整项目展示 -->
            <div>
              <h3 class="text-2xl font-semibold mb-8 text-center">
                <i class="fa fa-desktop text-secondary mr-2"></i>
                完整项目案例
              </h3>
              <div
                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
              >
                <!-- 若依后台管理系统 -->
                <a
                  href="https://demo.ruoyi.vip/index"
                  target="_blank"
                  class="group bg-dark/40 backdrop-blur-sm p-8 rounded-xl border border-white/10 hover:border-secondary/50 transition-all duration-300 hover:transform hover:scale-105 flex flex-col h-full"
                >
                  <div class="flex items-center mb-6">
                    <div
                      class="w-16 h-16 bg-secondary/20 rounded-xl flex items-center justify-center mr-5"
                    >
                      <i class="fa fa-dashboard text-secondary text-2xl"></i>
                    </div>
                    <div>
                      <h4 class="text-xl font-semibold text-secondary">
                        若依管理系统
                      </h4>
                      <p class="text-base text-gray-400">完整的后台管理平台</p>
                    </div>
                  </div>
                  <p class="text-gray-300 text-base mb-4 flex-grow">
                    基于 Vue 3 + Element Plus
                    的完整后台管理系统，包含权限管理、用户管理等功能。
                  </p>
                  <div
                    class="flex items-center text-secondary text-base mt-auto"
                  >
                    <span>查看演示</span>
                    <i class="fa fa-external-link ml-2"></i>
                  </div>
                </a>

                <!-- 数据可视化平台 -->
                <a
                  href="https://www.wanjunshijie.com/demo/2025/9/325/shoufeizhan/#/home"
                  target="_blank"
                  class="group bg-dark/40 backdrop-blur-sm p-8 rounded-xl border border-white/10 hover:border-yellow-500/50 transition-all duration-300 hover:transform hover:scale-105 flex flex-col h-full"
                >
                  <div class="flex items-center mb-6">
                    <div
                      class="w-16 h-16 bg-yellow-500/20 rounded-xl flex items-center justify-center mr-5"
                    >
                      <i class="fa fa-bar-chart text-yellow-500 text-2xl"></i>
                    </div>
                    <div>
                      <h4 class="text-xl font-semibold text-yellow-500">
                        数据可视化平台
                      </h4>
                      <p class="text-base text-gray-400">大数据展示经典案例</p>
                    </div>
                  </div>
                  <p class="text-gray-300 text-base mb-4 flex-grow">
                    基于 ECharts 和 D3.js
                    的数据可视化平台，展示各种图表和交互效果。
                  </p>
                  <div
                    class="flex items-center text-yellow-500 text-base mt-auto"
                  >
                    <span>查看演示</span>
                    <i class="fa fa-external-link ml-2"></i>
                  </div>
                </a>

                <!-- 企业官网模板 -->
                <a
                  href="https://im.qq.com/index/"
                  target="_blank"
                  class="group bg-dark/40 backdrop-blur-sm p-8 rounded-xl border border-white/10 hover:border-blue-500/50 transition-all duration-300 hover:transform hover:scale-105 flex flex-col h-full"
                >
                  <div class="flex items-center mb-6">
                    <div
                      class="w-16 h-16 bg-blue-500/20 rounded-xl flex items-center justify-center mr-5"
                    >
                      <i class="fa fa-building text-blue-500 text-2xl"></i>
                    </div>
                    <div>
                      <h4 class="text-xl font-semibold text-blue-500">
                        企业官网模板
                      </h4>
                      <p class="text-base text-gray-400">响应式官网设计</p>
                    </div>
                  </div>
                  <p class="text-gray-300 text-base mb-4 flex-grow">
                    现代化的企业官网模板，响应式设计，适配多种设备和屏幕尺寸。
                  </p>
                  <div
                    class="flex items-center text-blue-500 text-base mt-auto"
                  >
                    <span>查看演示</span>
                    <i class="fa fa-external-link ml-2"></i>
                  </div>
                </a>

                <!-- 滚动视差文案网站 -->
                <a
                  href="./scroll/index.html"
                  target="_blank"
                  class="group bg-dark/40 backdrop-blur-sm p-8 rounded-xl border border-white/10 hover:border-purple-500/50 transition-all duration-300 hover:transform hover:scale-105 flex flex-col h-full"
                >
                  <div class="flex items-center mb-6">
                    <div
                      class="w-16 h-16 bg-purple-500/20 rounded-xl flex items-center justify-center mr-5"
                    >
                      <i class="fa fa-magic text-purple-500 text-2xl"></i>
                    </div>
                    <div>
                      <h4 class="text-xl font-semibold text-purple-500">
                        滚动视差文案
                      </h4>
                      <p class="text-base text-gray-400">创意滚动交互效果</p>
                    </div>
                  </div>
                  <p class="text-gray-300 text-base mb-4 flex-grow">
                    采用视差滚动技术打造的沉浸式文案展示体验，图文结合呈现视觉冲击。
                  </p>
                  <div
                    class="flex items-center text-purple-500 text-base mt-auto"
                  >
                    <span>查看演示</span>
                    <i class="fa fa-external-link ml-2"></i>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 感谢页 -->
      <div
        class="section relative flex flex-col justify-center items-center overflow-hidden"
      >
        <div
          class="absolute inset-0 bg-gradient-to-tr from-dark via-primary/10 to-accent/10"
        ></div>

        <!-- 背景装饰元素 -->
        <div class="absolute inset-0 pointer-events-none">
          <!-- 浮动图标 -->
          <div class="absolute top-20 left-20 animate-float">
            <i class="fa fa-code text-primary/30 text-6xl"></i>
          </div>
          <div
            class="absolute top-40 right-32 animate-float"
            style="animation-delay: -2s"
          >
            <i class="fa fa-laptop text-secondary/30 text-5xl"></i>
          </div>
          <div
            class="absolute bottom-32 left-40 animate-float"
            style="animation-delay: -4s"
          >
            <i class="fa fa-rocket text-accent/30 text-4xl"></i>
          </div>
          <div
            class="absolute bottom-20 right-20 animate-float"
            style="animation-delay: -1s"
          >
            <i class="fa fa-heart text-pink-400/30 text-5xl"></i>
          </div>
          <div
            class="absolute top-1/2 left-10 animate-float"
            style="animation-delay: -3s"
          >
            <i class="fa fa-star text-yellow-400/30 text-4xl"></i>
          </div>
          <div
            class="absolute top-1/3 right-10 animate-float"
            style="animation-delay: -5s"
          >
            <i class="fa fa-lightbulb-o text-orange-400/30 text-5xl"></i>
          </div>

          <!-- 几何装饰 -->
          <div
            class="absolute top-10 left-1/2 w-2 h-2 bg-primary/40 rounded-full animate-pulse"
          ></div>
          <div
            class="absolute bottom-10 left-1/3 w-3 h-3 bg-secondary/40 rounded-full animate-pulse"
            style="animation-delay: -1s"
          ></div>
          <div
            class="absolute top-1/4 right-1/4 w-1 h-1 bg-accent/40 rounded-full animate-pulse"
            style="animation-delay: -2s"
          ></div>
        </div>

        <div class="relative z-10 text-center max-w-4xl mx-auto px-6">
          <!-- 主标题 -->
          <div class="mb-12 animate-fade-in-up">
            <h2
              class="text-[clamp(2.5rem,6vw,4rem)] font-bold mb-6 text-gradient bg-gradient-to-r from-primary via-secondary to-accent animate-pulse-slow"
            >
              期待你的加入！
            </h2>
            <p
              class="text-[clamp(1.1rem,2.5vw,1.5rem)] text-gray-300 mb-8 leading-relaxed animate-fade-in-up animate-delay-200"
            >
              让我们一起用代码创造更精彩的世界
            </p>
          </div>

          <!-- 特色卡片区域 -->
          <div class="grid md:grid-cols-3 gap-8 mb-12">
            <!-- 学习成长 -->
            <div
              class="bg-dark/60 backdrop-blur-sm p-6 rounded-xl border border-primary/20 hover:border-primary/50 transition-all duration-300 hover:transform hover:scale-105 animate-scale-in animate-delay-300"
            >
              <div
                class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4"
              >
                <i class="fa fa-graduation-cap text-primary text-2xl"></i>
              </div>
              <h3 class="text-xl font-semibold text-primary mb-3">技能提升</h3>
              <p class="text-gray-400 text-sm">
                掌握前沿技术栈，提升编程能力，成为全栈开发者
              </p>
            </div>

            <!-- 团队协作 -->
            <div
              class="bg-dark/60 backdrop-blur-sm p-6 rounded-xl border border-secondary/20 hover:border-secondary/50 transition-all duration-300 hover:transform hover:scale-105 animate-scale-in animate-delay-400"
            >
              <div
                class="w-16 h-16 bg-secondary/20 rounded-full flex items-center justify-center mx-auto mb-4"
              >
                <i class="fa fa-users text-secondary text-2xl"></i>
              </div>
              <h3 class="text-xl font-semibold text-secondary mb-3">
                团队合作
              </h3>
              <p class="text-gray-400 text-sm">
                与志同道合的伙伴一起，参与实战项目开发
              </p>
            </div>

            <!-- 创新实践 -->
            <div
              class="bg-dark/60 backdrop-blur-sm p-6 rounded-xl border border-accent/20 hover:border-accent/50 transition-all duration-300 hover:transform hover:scale-105 animate-scale-in animate-delay-500"
            >
              <div
                class="w-16 h-16 bg-accent/20 rounded-full flex items-center justify-center mx-auto mb-4"
              >
                <i class="fa fa-magic text-accent text-2xl"></i>
              </div>
              <h3 class="text-xl font-semibold text-accent mb-3">创新项目</h3>
              <p class="text-gray-400 text-sm">
                参与创新项目，将创意变为现实，展示你的才华
              </p>
            </div>
          </div>

          <!-- 底部装饰文字 -->
          <div
            class="mt-12 pt-8 border-t border-white/10 animate-fade-in-up animate-delay-500"
          >
            <p class="text-gray-500 text-sm">
              <i class="fa fa-code mr-2"></i>
              Made with
              <i class="fa fa-heart text-red-400 mx-1 animate-pulse"></i> by
              FeiTwnd
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 外部库 JS -->
    <script src="./js/fullpage.min.js"></script>
    <script src="./js/particles.min.js"></script>

    <!-- 本地 JS 文件 -->
    <script src="./js/animations.js"></script>
    <script src="./js/charts.js"></script>
    <script src="./js/main.js"></script>
  </body>
</html>
